<template>
    <div class="shopDetail">
        <div class="part1">
            <p class="activit">活动与属性</p>
            <div v-if="detailDatas.activities.length>0">
                <p class="txt" v-for="(item,index) in detailDatas.activities" :key="index" >
                    <span class="bao jian" :style="{'backgroundColor':'#'+item.icon_color}"> {{item.icon_name}} </span>
                    <span class="explain"> {{item.description}} </span>
                </p>
            </div>
            <!-- 保准票 -->
            <div v-if="detailDatas.supports.length>0">
                <p class="txt" v-for="(item1,index) in detailDatas.supports" :key="index">
                    <span class="bao" :style="{'backgroundColor':'#'+item1.icon_color}"> {{item1.icon_name}} </span>
                    <span class="explain"> {{item1.description}} </span>
                </p>
            </div>
        </div>
        <div class="part2">
            <div class="public" @click="publicAct">
                <span class="activit" >食品监督安全公示</span>
                <span class="go">
                    <span class="godetail">企业认证详情</span>
                    <i class="iconfont icon-youjiantou"></i>
                </span>
                
            </div>
            <div class="smile">
                <i class="iconfont icon-xiaolian"></i>
                <div class="result">
                    <p>
                        <span>监督检查结果：</span>
                        <span class="good">良好</span>
                    </p>
                    <p>检查日期：</p>
                </div>
            </div>
        </div>
        <div class="part3">
            <p class="activit">商家信息</p>
            <ul class="msg">
                <li > {{detailDatas.name}} </li>
                <li > {{detailDatas.address}} </li>
                <li > 营业时间：[ {{detailDatas.opening_hours[0]}} ]</li>
                <li class="open"  @click="show = true">
                    <span>营业执照</span>
                    <i class="iconfont icon-fanhui1" >
                    </i>
                </li>
                <li class="open" @click="show = true">
                    <span>餐饮服务许可证</span>
                    <i class="iconfont icon-fanhui1">
                        
                    </i>
                </li>
            </ul>
        </div>
        <van-overlay :show="show" @click="show = false">
            <div class="block" >
                <img :src="url+detailDatas.image_path" alt="" :class="wrapper">
            </div>
        </van-overlay>
    </div>
</template>
<script>
import Vue from 'vue';
import { Overlay } from 'vant';

Vue.use(Overlay);
export default {
    data:function() {
        return {
            title:"商家详情",
            id:JSON.parse(localStorage.getItem('shopid')),
            // detailDatas:JSON.parse(localStorage.getItem('shop'))
            detailDatas:[],
            show: false,
            url:"//elm.cangdu.org/img/"
        }
    },
    created() {
         this.$store.commit("nav/changeNavTitle",this.title)
        this.$axios.get('https://elm.cangdu.org/shopping/restaurant/'+this.id+'').then(res=>{
            this.detailDatas = res.data;
            console.log(11111111111111)
            console.log(this.detailDatas)
        }).catch(err=>console.log(err));
    },
    methods: {
        publicAct(){
            this.$router.push({ name:"Publicity"})
        }
    },
}
</script>

<style lang="less">
    .shopDetail{
        margin: 0;
        width: 100%;
        // height: 667px;
        background-color: #eeeeee;
        .part1{
            // width: 100%;
            background-color: white;
            // margin-top: 10px;
            border-top: 10px solid #eeeeee;
            .activit{
                font-size: 17.5px;
                color: #333333;
                line-height: 43px;
                padding-left: 12px;
                border-bottom: 1px solid #eeeeee;
            }
            .bao{
                font-size: 12px;
                background-color: #999999;
                color: #ffffff;
                padding: 2px;
                border-radius: 3px;
                margin-right: 10px;
                display: inline-block;
                text-align: center;

            }
            .zhun{
                background-color: rgb(87, 169, 255);
            }
            .jian{
                background-color: #f07373;
            }
            .explain{
                font-size: 12.8px;
                color: #666666;
            }
            .txt{
                padding: 5px 10px; 

            }
        }
        .part2{
            margin-top: 10px;
            background-color: white;
            .public{
                border-bottom: 1px solid #eeeeee;
                .activit{
                    font-size: 17.5px;
                    color: #333333;
                    line-height: 43px;
                    padding-left: 12px;
                }
                .go{
                    float: right;
                    .godetail{
                        color: #cccccc;
                        font-size: 17px;
                        line-height: 43px;
                    }
                    i{
                        color: #cccccc;
                    }
                }  
            }
            .smile{
                padding: 20px 10px;
                font-size: 13px;
                color: #666666;
              i{
                  color: rgb(126, 211, 33);
                  font-size: 46px;
               }  
               .good{
                   color:  rgb(126, 211, 33);
               }
               .result{
                   display: inline-block;
                   margin-left: 10px;
                   p{
                       line-height: 30px;
                   }
               }
            }
            
        }
        .part3{
             margin-top: 10px;
            background-color: white;
            border-bottom: 10px solid #eeeeee;
            .activit{
                font-size: 17.5px;
                color: #333333;
                line-height: 43px;
                padding-left: 12px;
                border-bottom: 1px solid #eeeeee;
            }
            .msg{
                li{
                    font-size: 14px;
                    color: #666666;
                    margin-left: 14px;
                    padding: 16px 14px 16px 0;
                    border-bottom: 1px solid #f5f5f5;
                }
                .iconfont{
                    float: right;
                    font-size: 18px;
                    color: #999999;
                }
                .open{
                    overflow: hidden;
                }
            }
        }
        //  .wrapper {
        //     display: flex;
        //     align-items: center;
        //     justify-content: center;
        //     height: 100%;
        // }

        .block {
            width: 120px;
            height: 120px;
            margin: 50% 20%;
        }
        .center{
            font-weight: 900;
            font-size: 18.75px;
        }
        
    }
    
</style>